<template>
  <div>
    <div id="nav">
      <p>查询</p>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="搜索：">
          <el-input suffix-icon="el-icon-search"
                    v-model="formInline.book_num"
                    placeholder="请输入预约码">
          </el-input>
          <el-form-item>
            <el-button type="primary"
                       round
                       class="search"
                       @click="onSearch">查询</el-button>
            <el-button type="primary"
                       round
                       class="search"
                       @click="onReset">重置</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div id="main">
      <el-table :data="tableData"
                stripe
                style="width: 100%"
                :cell-style="{border:'1px solid #DCDCDC'}"
                :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
        <el-table-column prop="book_num"
                         label="预约码"
                         width="100"
                         align='center'></el-table-column>
        <el-table-column width="110"
                         prop="customer_name"
                         label="用户名称"
                         align='center'></el-table-column>
        <el-table-column width="70"
                         prop="book_peoplenum"
                         label="人数"
                         align='center'></el-table-column>
        <el-table-column width="150"
                         prop="customer_tel"
                         label="联系电话"
                         align='center'></el-table-column>
        <el-table-column width="200"
                         prop="book_wait_time"
                         label="预约时间"
                         align='center'></el-table-column>
        <el-table-column width="200"
                         prop="book_eat_time"
                         label="就餐时间"
                         align='center'></el-table-column>
        <el-table-column width="80"
                         prop="table_size"
                         label="桌位类别"
                         align='center'></el-table-column>
        <el-table-column width="100"
                         prop="book_status"
                         label="状态"
                         align='center'></el-table-column>
        <el-table-column width="180"
                         prop="book_note"
                         label="备注"
                         align='center'></el-table-column>
        <el-table-column label="操作"
                         align='center'
                         width="200">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="onEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       @click="onDel(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handlePageChange"
                       :page-sizes="[5,10,15,20,25,30]"
                       :page-size="count"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="totalData.length">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="预约订单编辑"
               :visible.sync="editVisible"
               width="33%"
               :before-close="editClose">
      <el-form ref="form"
               :model="bookData"
               label-width="80px">
        <el-form-item label="预约码">
          <el-input disabled
                    v-model="bookData.book_num"
                    class="xuanze"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input disabled
                    v-model="bookData.customer_name"
                    class="xuanze"></el-input>
        </el-form-item>
        <el-form-item label="人数">
          <el-input v-model="bookData.book_peoplenum"
                    class="xuanze"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker v-model="bookData.book_wait_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd hh:mm:ss"
                          class="xuanze">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="就餐时间">
          <el-date-picker v-model="bookData.book_eat_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd hh:mm:ss"
                          class="xuanze">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="bookData.book_status"
                     placeholder="请选择管理员类型"
                     class="xuanze">
            <el-option label="正常"
                       value="正常"></el-option>
            <el-option label="失效"
                       value="失效"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     round
                     @click="onEditOk">确定</el-button>
          <el-button round
                     @click="editClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    return {
      formInline: {
        book_num: "",
      },
      totalData: [],
      page: 1,
      count: 5,
      checked: false,
      editVisible: false,
      bookData: {
        book_num: '',
        customer_name: '',
        book_peoplenum: '',
        book_eat_time: '',
        book_wait_time: '',
        book_status: ''
      },
    }
  },
<<<<<<< HEAD
   methods: {
     getuser: function () {
            this.$axios({
                url: '/api/bookingorder/getbookorder'
            }).then((res) => {
                this.totalData=res.data.data
            })
        },
    onSearch() {
       this.$axios({
            url:'/api/bookingorder/searchbookid',
            params:this.formInline,
        }).then((res)=>{
            this.totalData=res.data.data
            this.page=1
        })
    },
     onEdit:function(data){
            this.editVisible=true;    
            this.bookData={...data};         
        },
         onEditOk: function () {
            this.$axios({
                url: '/api/bookingorder/editbookorder',
                method: 'post',
                data: this.bookData
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.editVisible = false;
                    this.getuser();
                }
            })
        },
    onReset(){
        this.formInline={
            book_num:''
=======
  methods: {
    getuser: function () {
      this.$axios({
        url: '/qj/bookingorder/getbookorder'
      }).then((res) => {
        this.totalData = res.data.data
      })
    },
    onSearch () {
      this.$axios({
        url: '/qj/bookingorder/searchbookid',
        params: this.formInline,
      }).then((res) => {
        this.totalData = res.data.data
        this.page = 1
      })
    },
    onEdit: function (data) {
      this.editVisible = true;
      this.bookData = { ...data };
    },
    onEditOk: function () {
      this.$axios({
        url: '/qj/bookingorder/editbookorder',
        method: 'post',
        data: this.bookData
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editVisible = false;
          this.getuser();
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
        }
      })
    },
    onReset () {
      this.formInline = {
        book_num: ''
      }
      this.getuser();
    },
    editClose: function () {
      this.editVisible = false;
    },
<<<<<<< HEAD
    onDel(data){
      this.$alert('你确定要删除该预约订单吗？',{
            title:'删除预约订单',
            callback: (action)=> {
              if(action=='confirm'){
                this.$axios({
                    url:'/api/bookingorder/delbookid',
                    method:'post',
                    data:{book_id:data.book_id}
                }).then((res)=>{
                     if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getuser();
                        this.page=1       
                     }   
                })
            }else{
                  this.$message({
                      type: 'cancel',
                      message: '取消删除成功。'
                  });
                  }
                  }
        });
    }
=======
    // 每页多少条数据
    handleSizeChange (count) {
      this.count = count
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
    },
    // 分页
    handlePageChange (page) {
      this.page = page
    },
    onDel (data) {
      this.$alert('你确定要删除该预约订单吗？', {
        title: '删除预约订单',
        callback: (action) => {
          if (action == 'confirm') {
            this.$axios({
              url: '/qj/bookingorder/delbookid',
              method: 'post',
              data: { book_id: data.book_id }
            }).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getuser();
                this.page = 1
              }
            })
          } else {
            this.$message({
              type: 'cancel',
              message: '取消删除成功。'
            });
          }
        }
      });
    }
  },
  created: function () {
    this.getuser();
  },
  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  },
}

</script>
<style scoped>
#nav {
  border: 1px solid rgba(242, 242, 242);
  padding: 30px 0 0 45px;
}
.el-form-item {
  margin-left: 20px;
}
.el-input {
  width: 370px;
}
.search {
  margin-left: 20px;
  width: 80px;
  height: 40px;
}
#main {
  margin-top: 5px;
  padding: 15px 15px;
  border: 1px solid rgba(242, 242, 242);
}
.block {
  text-align: center;
  margin-top: 50px;
}
.xuanze {
  width: 300px;
}
</style>